<!DOCTYPE html>
<html lang="zh_cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>插值表达式</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <link rel="icon" href="D:\A~shcool_study\vue_gittee\bitbug_favicon.ico" type="image/x-icon">
</head>

<body>

  <!-- 插值表达式:vue的一种模板语法作用:利用 表达式 进行插值渲染语法:{{表达式 }}
  注意点:
  1.使用的数据要存在
  2.支持的表达式，不是语句 if for
  3.不能在标签属性中使用 {{ }} -->

  <div id="app">
    <p>{{nickname}}</p>
    <p>{{nickname.toUpperCase()}}</p>
    <p>{{nickname}}+ '你好'</p>
    <p>{{age>=18? '已成年':'未成年'}}</p>
    <p>{{friend.name}}</p>
    <p>{{friend.desc}}</p>


    <script>
      const app = new Vue({
        el: '#app',
        data: {
          nickname: 'tonk',
          age: 18,
          friend: {
            name: 'zhz',
            desc: '热爱学习vue'
          }
        }
      })
    </script>
</body>

</html>